<template>
      <van-search
          class="search"
          v-model="inputValue"
          placeholder="搜索你要的商品"
          show-action
          input-align="center"
          :left-icon="leftIcon"
          @focus="handlerFouch"
          @blur="handlerBlur"
      >
        <template  #action>
          <van-icon
              name="/src/assets/icon/消息@2x.png"
              badge="99"
              size="30"
              @click="goCustomerService"
          />
        </template>
      </van-search>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()
function goCustomerService(){
  router.push('/customerService')
}
const inputValue = ref('')
const leftIcon = ref('search')
function handlerFouch(){
  console.log('fouch')
  leftIcon.value = ''
}
function handlerBlur(){
  console.log('blur')
  leftIcon.value = 'search'
}
</script>
<style scoped lang="scss">
.search{
  overflow:hidden;

  //左侧搜索图标
  ::v-deep .van-field__left-icon{
      //margin-left: 100px;
    position: absolute;
    left: 80px;
  }

  //右侧图标
  ::v-deep .van-search__action{
    display: flex;
    justify-content: center;
    align-content: center;

  }
}

</style>
